<style>
    body {
        font-size: 14px;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }



    ::-webkit-scrollbar { /*滚动条整体样式*/

        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;

    }

    ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/

        border-radius: 10px;

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: #535353;

    }

    ::-webkit-scrollbar-track { /*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        border-radius: 10px;

        background: #EDEDED;

    }

    ul, li {
        list-style: none;
    }


    #container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0;

    }

    a {
        color: #cecece;
    }

    .custom-dialog {
        display: none;
        padding-right: 20px;
        box-sizing: border-box;
        padding-top: 20px;
    }

    .test {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .play .title {
        width: 100%;
        height: 60px;
        background: #2E2D3C;
    }

    .play .title a {
        color: white;
        font-size: 18px;
        line-height: 60px;
        margin: 0 20px;
    }

    .play .title a:hover {
        color: #00a2d4;
        cursor: pointer;
    }

    .play .title span {
        color: #cecece;
        font-size: 16px;
    }

    .play .video {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 60px;
    }

    .play .video #player {
        width: 100%;
        height: 100%;
    }

    #list .title {
        font-size: 13px;
        color: white;
        padding-left: 10px;
    }

    #list .link {
        font-size: 12px;
        color: white;
        padding-left: 30px;
    }

    #list .link i {
        margin-right: 5px;
    }

    #list .item {
        line-height: 35px;
        box-sizing: border-box;
    }

    #list .child-item {
        line-height: 40px;
        background: #f3f3f3;
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 20px;
    }

    #list .link a:hover {
        color: #00a2d4;
        cursor: pointer;
    }

    #dir {
        display: none;
        position: absolute;
        left: 0;
        width: 240px;
        top: 60px;
        bottom: 0;
        overflow-y: auto;
        background: #2E2D3C;
    }
</style>
<div id="container" class="fsh-rightPanel">
    <div class="play">
        <div class="title">
            <a><i class="iconfont icon-category" id="btn-dir">&nbsp;目录</i></a><span>平面设计课程</span>
        </div>
        <div class="video">
            <video id="player" class="video-js vjs-big-play-centered" controls preload="none"
                   poster="http://vjs.zencdn.net/v/oceans.png">
                <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                 
            </video>
        </div>
    </div>
</div>
<div id="dir">
    <ul id="list" id="play-list">
        <li class="item">
            <p class="title">平面设计系列课程</p>
            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>
            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>
        </li>
        <li class="item">
            <p class="title">平面设计系列课程</p>
            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>
            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>
        </li>
        <li class="item">
            <p class="title">平面设计系列课程</p>
            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>
            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>
        </li>
    </ul>
</div>

<script>
    var player = videojs('player', {
        controls: true,
        autoplay: false,
        preload: 'auto',
    });
    // var player = videojs('player', {
    //     controls: true,
    //     autoplay: true,
    //     preload: 'auto',
    //     language: 'zh-CN',
    // });
    // var parentId = window.util.getUrlParam('id');

    // 显示隐藏目录
    $('#btn-dir').click(function () {
        $('#dir').toggle();
    });
    var parentId = 15;
    var parentInfo;
    layui.use(['layer', 'upload', 'form', 'laydate', 'element'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var form = layui.form;
        var layData = layui.laydate;
        var element = layui.element;
        //监听课程状态选择
        form.on('switch(status)', function (data) {

        });
        //开始日期
        // layData.render({
        //     elem: '#startDate'
        //     , type: 'datetime'
        // });
        //结束日期
        // layData.render({
        //     elem: '#endingDate'
        //     , type: 'datetime'
        // });
        upload.render({
            elem: '#upload-file'
            , url: context + '/api/fileupload/add'
            , field: 'attach'
            , accept: 'file'
            , size: 1024 * 2
            , multiple: true

            , allDone: function (obj) { //当文件全部被提交后，才触发
                element.progress('progress', (obj.successful / obj.total * 100) + '%');
                console.log(obj.total); //得到总文件数
                console.log(obj.successful); //请求成功的文件数
                console.log(obj.aborted); //请求失败的文件数
            }
            , done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”

            }
        });
        // loadCourseData();
        // loadDirData();
    });


    // 新建目录
    $('#btn-new-dir').click(function () {
        showDialog(parentId);
    });
    // 显示隐藏操作
    var list = $('#list');
    list.find('li').mouseenter(function () {
        $(this).find('span.handler').show();
    });
    list.find('li').mouseleave(function () {
        $(this).find('span.handler').hide();
    });
    // 添加
    list.find('.desc.html').click(function () {
        console.log('aaa');
    });
    // 编辑
    list.find('.edit').click(function () {
        console.log('aaa');
    });
    // 删除
    list.find('.del').click(function () {
        console.log('aaa');
    });
    var ue = UE.getEditor('editor-content');
    //监听浏览器宽度的改变
    window.onresize = function () {
        ue.setHeight($('#editor-content').height());
    };


    //加载课程信息
    function loadCourseData() {
        $.ajax({
            url: context + '/api/educourse/getOne?course_id=' + parentId,
            type: 'GET',
            success: function (result) {
                if (result.success) {
                    parentInfo = result.data;
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }

    //加载目录
    function loadDirData() {
        $.ajax({
            url: context + '/api/educourse/getTask?course_id=' + parentId,
            type: 'GET',
            success: function (result) {
                if (result.success) {
                    var data = result.data;
                    var list = $('#list');
                    list.empty();
                    for (var i = 0; i < data.length; i++) {
                        var li = '    <li class="item"><span class="title">0' + (i + 1) + '【' + courseStatus[data[i].course_state] + '】' + data[i].course_task + ' </span><span\n' +
                            '                        class="handler">\n' +
                            '                        <i class="layui-icon add" title="添加">&#xe654;</i>\n' +
                            '                         <i class="layui-icon edit" title="编辑">&#xe642;</i>\n' +
                            '                         <i class="layui-icon del" title="删除">&#xe640;</i>\n' +
                            '                    </span>\n' +
                            '                </li>';
                        list.append(li);
                    }
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }


</script>
